<template>
	<view
		class="chat-tools"
		:class="[
			{
				'is-show': visible
			}
		]"
	>
		<swiper>
			<swiper-item>
				<u-row>
					<u-col :span="6" >
						<view class="block" @tap="chooseImage()">
							<u-icon name="photo"></u-icon>
							<text class="label">照片</text>
						</view>
					</u-col>

					<u-col :span="6">
						<view class="block" @tap="chooseImage(['camera'])">
							<u-icon name="camera"></u-icon>
							<text class="label">拍摄</text>
						</view>
					</u-col>

					<u-col :span="6">
						<view class="block"  @tap="chooseVideo">
							<u-icon name="file-text-fill"></u-icon>
							<text class="label">视频</text>
						</view>
					</u-col>

					<u-col :span="6">
						<view class="block">
								<u-icon name="bookmark"></u-icon>
							<text class="label">红包</text>
						</view>
					</u-col>
				</u-row>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const extToType={
		'jpg':'image/jpeg',
		'jpeg':'image/jpeg',
		'png':'image/png',
		'gif':'image/gif',
		'webp':'image/webp',
		'svg':'image/svg+xml',
		'mp3':'audio/mp3',
		'mp4':'video/mp4',
		'ogg':'audio/ogg',
		'webm':'video/webm'
	}
	const generateName= function (length) {
		const data =
			["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F",
      "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y",
      "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r",
      "s", "t", "u", "v", "w", "x", "y", "z"];
		let nums = "";
		for (let i = 0; i < length; i++) {
			const r = parseInt(Math.random() * 61, 10);
			nums += data[r];
		}
		return nums;
	}
	const db = uniCloud.database();
	const collection=db.collection('user-id-files')
export default {
	props: {
		visible: Boolean,
	},
	data(){
		return{
			file:null,//文件
		}
	},
	methods:{
		chooseImage( sourceType= ['album']){
			uni.chooseImage({
					count: 1,sourceType
			})
			.then(([e,res])=>{
				if(res.tempFilePaths.length===0){
					return
				}
				uni.showLoading({
					mask:true,
					title:"文件上传中"
				})
				const src=res.tempFilePaths[0]
				let {type,size,name} = res.tempFiles[0]
				if(!type ){
					const ext=src.substring(src.lastIndexOf(".")+1).toLowerCase()
					type=extToType[ext]||'file'
				}
				if(!name){
					name=src.substring(src.lastIndexOf("\/")+1)
				}
				const self=this
				this.file={
					src,
					isUpload:false,
				}
				uni.getImageInfo({
					src,
					success:function(res){
						const {width,height}=res;
						self.$set(self.file,'fileInfo',{
							width,height,name,size,type
						})
					},
					fail:function(){
						self.$set(self.file,'fileInfo', {name,size,type})
					},
					complete:function(){
						self.uploadFile(self.file)
						 	.then(res=>{
								self.$emit('upload',res)
								uni.hideLoading()
						 	})
						 	.catch(()=>uni.hideLoading())
					}
				})
				
			}).catch(e=>{});
		},
		chooseVideo(){
			 uni.chooseVideo()
				.then(([code,res])=>{
					if(!res){
						return;
					}
					const src=res.tempFilePath
					let {size,name,width,height} = res
					width=width*1
					height=height*1
					let type='video/mp4'
					if(!name){
						name=src.substring(src.lastIndexOf("\/")+1)
					}
					this.file={
						src,
						isUpload:false,
						fileInfo:{size,name,width,height,type} 
					}
					uni.showLoading({
						mask:true,
						title:"视频上传中"
					})
					this.uploadFile(this.file) 
						.then(res=>{
							this.$emit('upload',res)
							console.log(res);
							uni.hideLoading()
						})
						.catch((e)=>{
							uni.hideLoading()
						})
				})
		},
		uploadFile(item){
			return new Promise((resolve,reject)=>{
				if(item.isUpload){
					reject()
				}
				this.$set(item,'isUpload',true)
				const self=this,
					filePath=item.src,
					{name,size,type,width,height}=item.fileInfo,
					cloudPath=generateName()+name;
				uniCloud.uploadFile({
					filePath,cloudPath,
					onUploadProgress: function(progressEvent) {
						const {loaded,total}=progressEvent
						const  percentCompleted = loaded/total*100
						self.$set(item,'progress',percentCompleted)
					}
				}).then(res=>{
					self.$set(item,'src',res.fileID)
					return Promise.resolve(res.fileID)
				}).then(fileID=>{
					const classify=self.classify
					const data={name,cloudPath,fileID,size,type,width,height}
					collection.add(data)
					.then(res=>{
						self.$set(item,'progress',0)
						let fileType=type.substr(0, type.indexOf("/"));
						resolve({url:fileID,type:fileType,width,height})
					})
					.catch(res=>{
						reject(res)
					})
				}).catch(res=>reject(res))
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.chat-tools {
	background-color: #f6f7f9;
	height: 0;
	transition: height 0.3s;

	&.is-show {
		height: 400rpx;
	}

	swiper {
		height: 100%;
	}

	.block {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;

		.icon {
			height: 100rpx;
			width: 100rpx;
			border-radius: 10rpx;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;

			.iconfont {
				font-size: 60rpx;
				color: #d9dbde;
			}
		}

		.label {
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #333;
		}

		&:active {
			.iconfont {
				color: #999;
			}
		}
	}
}
</style>
